<template>
  <div class="body-form-account">
    <a-form
      :label-col-style="{ display: 'none' }"
      :wrapper-col-style="{ flex: 1 }"
      ref="formRef"
      :model="form"
      :rules="rules"
      @submit="loginSubmit"
    >
      <a-form-item field="account" style="margin-bottom: 32px">
        <div class="input-icon">
          <GiSvgIcon name="user-login" size="24"></GiSvgIcon>
        </div>
        <div class="line"></div>
        <a-input v-model.trim="form.account" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item field="password" style="margin-bottom: 16px">
        <div class="input-icon">
          <GiSvgIcon name="lock-login" size="24"></GiSvgIcon>
        </div>
        <div class="line"></div>
        <a-input-password v-model.trim="form.password" placeholder="请输入密码" />
      </a-form-item>
      <div class="password-opt">
        <a-checkbox v-model="form.rememberMe">
          <span class="password-opt-label">记住密码</span>
        </a-checkbox>
        <span class="password-opt-retrieve" @click="resettingPassword">找回密码</span>
      </div>
      <a-button class="login-btn" html-type="submit">立即登录</a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores";
import { useLoading } from "@/hooks";
import { type FormInstance, Message } from "@arco-design/web-vue";
import Cookies from "js-cookie";
import _ from "lodash"

const router = useRouter();
const userStore = useUserStore();
const { setLoading } = useLoading();
const form = reactive({
  grantType: "password",
  account: "",
  password: "",
  rememberMe:false
});
const rules: FormInstance["rules"] = {
  account: [{ required: true, message: "请输入账号" }],
  password: [{ required: true, message: "请输入密码" }]
};

const emit = defineEmits(["resettingPassword"]);
const resettingPassword = () => {
  emit("resettingPassword");
};

/**
 * 登录
 */
const formRef = ref<FormInstance>();
const accountLogin = async () => {
  const valid = await formRef.value?.validate();
  if (valid) return;
  setCookie()
  await userStore.login(form);
  const { redirect, ...othersQuery } = router.currentRoute.value.query;
  router.replace({
    // path: (redirect as string) || "/",
    path: "/",
    query: {
      ...othersQuery
    }
  });
  Message.success("登录成功");
};
const loginSubmit = _.debounce(accountLogin,500)



const setCookie = () => {
  if (form.rememberMe) {
    Cookies.set("account", form.account, { expires: 7 });
    Cookies.set("password", form.password, { expires: 7 });
    Cookies.set("rememberMe", form.rememberMe, { expires: 7 });
  } else {
    Cookies.remove("account");
    Cookies.remove("password");
    Cookies.remove("rememberMe");
  }
}

const getCookie = () => {
  const account = Cookies.get("account");
  const password = Cookies.get("password");
  const rememberMe = !!Cookies.get("rememberMe");
  form.account = !account ? form.account : account
  form.password = !password ? form.password : password
  form.rememberMe = !rememberMe ? form.rememberMe : rememberMe
}
getCookie()
</script>

<style scoped lang="scss">
@import "index";
</style>
